<template>
  <div class="cart-bottom-bar">
    <div class="left">
      <check-button
        class="button"
        :isCheck="isSelect"
        @click.native="selectAll"
      ></check-button>
      <div class="text">
        <span>全选</span> <span>合计：</span><span>{{ totalPrice }}</span>
      </div>
    </div>

    <div class="right" @click="pay">去支付({{ length }})</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CheckButton from "components/content/checkButton/CheckButton.vue";

export default {
  components: { CheckButton },
  data() {
    return {};
  },
  created() {},
  computed: {
    ...mapGetters(["cartGoodsList"]),
    isSelect() {
      return this.cartGoodsList.length !== 0
        ? !this.cartGoodsList.find((item) => !item.check)
        : false;
    },
    length() {
      return this.cartGoodsList.filter((item) => item.check).length;
    },
    totalPrice() {
      return (
        "￥" +
        this.cartGoodsList
          .filter((item) => item.check)
          .reduce((preValue, item) => preValue + item.realPrice * item.count, 0)
          .toFixed(2)
      );
    },
  },
  mounted() {},
  methods: {
    selectAll() {
      if (this.isSelect) {
        this.cartGoodsList.forEach((item) => {
          item.check = false;
        });
      } else {
        this.cartGoodsList.forEach((item) => {
          item.check = true;
        });
      }
    },
    pay(){
      if(this.cartGoodsList.length>0){
        this.$toast.show('前往支付中');
      }
    }
  },
};
</script>

<style scoped lang="scss">
.cart-bottom-bar {
  position: absolute;
  display: flex;
  width: 100vw;
  height: 40px;
  bottom: 49px;
  left: 0px;
  border: 1px solid #f5f2f2;
}
.left {
  flex: 1;
  display: flex;
  align-items: center;
}
.right {
  width: 80px;
  color: #fff;
  background-color: #ff4400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  margin-left: 5px;
  width: 22px;
  height: 22px;
}
.text span:first-of-type {
  margin-left: 10px;
}

.text span:nth-of-type(2) {
  margin-left: 10px;
  font-size: 12px;
}
.text span:last-of-type {
  color: #ff4400;
  font-size: 20px;
}
</style>
